<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>java</title>
    <link rel="stylesheet" th:href="@{/css/myStyle.css}"/>
</head>
<body>
    <div class="n-head">
        <div class="g-doc f-cb">
            <div class="user">
                买家你好，<span class="name">buyer</span>！<a href="/logout">[退出]</a>
            </div>
            <ul class="nav">
                <li><a href="/">首页</a></li>
                <li><a href="/bill">账务</a></li>
                <li><a href="/preorder">购物车</a></li>
            </ul>
        </div>
    </div>
    <div class="g-doc">
        <div class="m-tab m-tab-fw m-tab-simple f-cb">
            <h2>已购买的内容</h2>
        </div>
        <table class="m-table m-table-row n-table g-b3">

            <thead>
                <tr>
                    <th>内容图片</th>
                    <th>内容名称</th>
                    <th>购买时间</th>
                    <th>购买数量</th>
                    <th>购买价格</th>
                </tr>
            </thead>
            <tbody id="TBody">

            </tbody>

            <tfoot>
                <tr>
                    <td colspan="4"><div class="total">总计：</div></td>
                    <td>
                        <span style='float: left' class="v-unit">¥</span>
                        <span style='float: left' class="value" th:text="${totalValue}">6262</span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="n-foot">
        <p>
            杭研有数：陈佳——在校作业
        </p>
    </div>

    <script>
        var hidediv = document.createElement("div");
        hidediv.innerHTML = "[[${arr}]]";
        var data = hidediv.innerText;
        var arr = JSON.parse(data);
        console.log(arr);
        console.log("[[${totalValue}]]");

        var Tbody = document.getElementById("TBody");
        (function () {
            let str = "";
            for(const i in arr){
                var timestamp = new Date(arr[i].purchaseDate);
                str += "<tr>" +
                    "<td><a href=\"/show?id=" + arr[i].id + "\"><img src=\"" + arr[i].picUrl + "\" alt=\"\"></a></td>" +
                    "<td><h4 style='float: left'><a href=\"/show?id=" + arr[i].id + "\">" + arr[i].title + "</a></h4></td>" +
                    "<td><span style='float: left' class=\"v-time\">" + timestamp.toLocaleDateString().replace(/\//g, "-") + " " + timestamp.toTimeString().substr(0, 8) + "</span></td>" +
                    "<td><span style='float: left' class=\"v-num\">" + arr[i].num + "</span></td>" +
                    "<td><span style='float: left' class=\"v-unit\">¥</span><span style='float: left' class=\"value\">" + arr[i].price + "</span></td>" +
                    "</tr>";
            }
            Tbody.innerHTML = str;
        })()
    </script>
</body>
</html>